@component-namespace cs {
    @component toast {
      position: fixed;
      max-width: 80%;
      border-radius: toRem(5*1.8);
      background: rgba(0, 0, 0, 0.7);
      color: #fff;
      box-sizing: border-box;
      text-align: center;
      z-index: 1000;
      transition: opacity .2s linear;
  
      @descendent icon {
        display: block;
        text-align: center;
        font-size: toRem(70);
      }
      
      @descendent text {
        font-size: toRem(30);
        display: block;
        text-align: center;
      }
      
      @when placetop {
        top: 50px;
        left: 50%;
        transform: translate(-50%, 0);
      }
      
      @when placemiddle {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
      
      @when placebottom {
        bottom: 50px;
        left: 50%;
        transform: translate(-50%, 0);
      }
      
      @descendent pop-enter {
        opacity: 0;
      }

      @descendent pop-leave-active {
        opacity: 0;
      }
    }
  }